<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich, null, {
    locale: "ZH",
  });
  let data = [
    ["2024-03-01", 30],
    ["2024-03-12", 10],
    ["2024-03-28", 50],
  ];
  let option = {
    calendar: {
      range: ["2024-03"],
      orient: "vertical",
      cellSize: [100, 50],
      dayLabel: {
        margin: 10,
      },
    },
    series: [
      {
        type: "graph",
        coordinateSystem: "calendar",
        edgeSymbol: ["none", "arrow"],
        symbolSize: 20,
        edgeSymbolSize: 20,
        edgeLabel: {
          show: true,
          formatter: (value) => {
            let pos = value.data
            return data[pos.source][0] + '指向' + data[pos.target][0];
          },
        },
        data: data,
        links: [
          {
            source: 0,
            target: 1,
          },
          {
            source: 1,
            target: 2,
          },
          {
            source: 2,
            target: 0,
          },
        ],
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
